<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<title>Panel插件</title>
<style>
body { line-height:170%; font-size:12px; }
pre { border:1px solid #ddd; background-color:#fff; padding:6px; margin:0px; font-size:12px; }
.code { border:1px solid #666; background-color:#eee; padding:6px; }
.title { font-weight:bold; margin-bottom:5px; }
.block { margin:10px; }

.dropdown1 { padding:3px 8px 2px 8px; margin-bottom:5px; display:block; text-align:center; text-decoration:none; border:1px solid #ccc; width:60px;background-color:#666; color:#fff; }
.nav_focus { background-color:#0066CC; color:#fff; text-decoration:none; }
#data_dropdown1 .bd { padding:2px;}
#data_dropdown1 .bd ul { padding:0px; margin:0px;}
#data_dropdown1 .bd ul li{ padding:0px; margin:1px; list-style:none}
#data_dropdown1 .bd ul li a{ display:block; width:100%; padding:2px 0px 1px 0px; background-color:#fff; color:#000; text-decoration:none;}
#data_dropdown1 .bd ul li a:hover{ background-color:#0066CC; color:#fff; text-decoration:none;}
#data_dropdown1 .bd ul li a img{ border:0px; margin-left:5px; margin-bottom:-3px;}
</style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Leo,HEnT Studio,LAMP,PHP,MySQL" />
    <meta name="DEscription" content="HEnT Studio" />
    <meta name="Author" content="Leo,HEnT Studio" />
    <title>New Page | xHTML1.0 Transitional</title>
    <link rel="shortcut icon" href="favicon.ico" />

    <link rel="stylesheet" type="text/css" href="panel.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.global.js"></script>
    <script type="text/javascript" src="panel.js"></script>
    <script type="text/javascript" src="jqDnR.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script> 
	function  a(){$.confirm("真的要删除吗?");
	
	}
	function  b(){$.alert("真的要删除吗?");
	
	}
	function  c(){$.panel("真的要删除吗?");
	
	}
	function  d(){$.dialog("真的要删除吗?");
	
	}
    </script>
</head>
<body>
HTML: <a href="#" class="alert2">示例二</a>

<div style="font-size:25px; text-align:center; font-weight:bold; line-height:120%">jQuery面板插件</div>

<div class="block">
	<div class="title">作者: 阿龙</div>
	<div class="title">更新时间: 2008-09-10</div>

</div>

<div class="block">
<input type="button" onclick="a()" value="确认" />
<input type="button" onclick="b()" value="弹出" />
<input type="button" onclick="c()" value="面板" />
<input type="button" onclick="d()" value="对话框" />
	<div class="title">说明</div>
	<div class="code">panel插件用来显示提示信息(如:alert,confirm),将网页,图片,或网页中的元素显示在面板中,还可以进行表单提交,让用户有一个比较好的web2.0的体验</div>
</div>

<div class="block">
	<div class="title">基本使用方法(有alert,confirm,panel,dialog)</div>
	<div class="code">$.alert(&quot;欢迎光临&quot;);<br />

	$.confirm(&quot;真的要删除吗?&quot;);<br />
	$.panel({url:&quot;http://www.google.cn&quot;}); //显示一个面板 <br />
	$.dialog({url:&quot;login.php&quot;}); //显示一个对话框,用于提交表单 <br />
	  <br />

	$(&quot;#id&quot;).alert(); //当点击链接时,alert它的title <br />
	$(&quot;#id&quot;).confirm(); //当点击链接时,confirm它的title<br />
	$(&quot;#id&quot;).tooltip();//当鼠标移过元素时,将它的title格式化显示<br />
	$(&quot;#id&quot;).panel(); //当点击链接时,将它的href在面板中显示 <br />

	$(&quot;#id&quot;).dialog();  //当点击链接时,将它的href在面板中以对话框方式显示,适合于表单提交</div>
</div>

<div class="block">
	<div class="title">alert使用(具体使用方法请见源代码)</div>
	<div class="code">
	1.<a href="#" class="alert1" title="这是示例一">示例一</a> (alert它的title)
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;alert1&quot; title=&quot;这是示例一&quot;&gt;示例一&lt;/a&gt;<br />JS:   $(&quot;.alert1&quot;).alert();</pre>

	2.<a href="#" class="alert2">示例二</a>  (alert指定内容)
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;alert2&quot;&gt;示例二&lt;/a&gt;<br />JS:<br />$(&quot;.alert2&quot;).click(function(){<br />    $.alert(&quot;这是示例二&quot;);<br />    return false;<br />});</pre>

	3.应用回调函数: <a href="#" class="alert3" title="这是示例三">示例三</a> &nbsp; <a href="#" class="alert4">示例四</a>
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;alert3&quot; title=&quot;这是示例三&quot;&gt;示例三&lt;/a&gt; &amp;nbsp; &lt;a href=&quot;#&quot; class=&quot;alert4&quot;&gt;示例四&lt;/a&gt;<br />JS: <br />var handel_alert = function(){ alert(&quot;OK&quot;); }<br />$(&quot;.alert3&quot;).alert(handel_alert);<br />$(&quot;.alert4&quot;).click(function(){<br />    $.alert(&quot;这是示例四&quot;, handel_alert);<br />    return false;<br />});</pre>

	<script>
	$(document).ready(function() {
		
		s = $(".alert1").alert();
		
		$(".alert2").click(function(){
			$.alert("这是示例二");
			return false;
		});
		
		var handel_alert = function(){ alert("OK"); }
		
		$(".alert3").alert(handel_alert);
		
		$(".alert4").click(function(){
			$.alert("这是示例四", handel_alert);
			return false;
		});
	});
	</script>
  </div>
</div>

<div class="block">
	<div class="title">confirm使用</div>
	<div class="code">
	1.<a href="1.html" class="confirm1" title="确定要删除吗?">示例一</a> (confirm它的title, 当点了确定后进入它的链接)
	<pre>HTML: &lt;a href=&quot;1.html&quot; class=&quot;confirm1&quot; title=&quot;确定要删除吗?&quot;&gt;示例一&lt;/a&gt;<br />JS:   $(&quot;.confirm1&quot;).confirm(handel_confirm);</pre>

	2.<a href="#" class="confirm2">示例二</a>  (confirm指定内容,并回调函数)
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;confirm2&quot;&gt;示例二&lt;/a&gt;<br />JS:  <br />var handel_confirm = function(bool, panel){ <br />    if (bool)alert(&quot;你点了确定&quot;); <br />    else alert(&quot;你点了取消&quot;)<br />}<br />$(&quot;.confirm2&quot;).click(function(){<br />    $.confirm(&quot;确定要删除吗&quot;, handel_confirm);<br />    return false;<br />});</pre>

	<script>
	$(document).ready(function() {
		$(".confirm1").confirm();
		
		var handel_confirm = function(s){ 
			if (s)alert("你点了确定"); 
			else alert("你点了取消")
		}
		
		$(".confirm2").click(function(){
			$.confirm("确定要删除吗", handel_confirm);
			return false;
		});
	});
	</script>
  </div>
</div>

<div class="block">
	<div class="title">tooltip使用</div>
	<div class="code">
	示例:
	 <input class="tooltip" type="button" name="register" value="注册" title="注册请点击" />
	 <input class="tooltip" type="button" name="login" value="登录" title="登录请点击" />

	 <pre>HTML: <br />&lt;input class=&quot;tooltip&quot; type=&quot;button&quot; name=&quot;register&quot; value=&quot;注册&quot; title=&quot;注册请点击&quot; /&gt;<br />&lt;input class=&quot;tooltip&quot; type=&quot;button&quot; name=&quot;login&quot; value=&quot;登录&quot; title=&quot;登录请点击&quot; /&gt;<br />JS:   <br />$(&quot;.tooltip&quot;).tooltip(); </pre>

	<script>
	$(document).ready(function() {
		$(".tooltip").tooltip();		
	});
	</script>
  </div>
</div>

<div class="block">
	<div class="title">dropdown使用(可用作下拉菜单)</div>
	<div class="code">
	<a href="1.html" class="dropdown1">菜单示例</a> 
	<div id="data_dropdown1" style="display:none">

	  <div class="bd">
		<ul>
		  <li><a href="#"><img src="img/folder.png" /> 打开</a></li>
		  <li><a href="#"><img src="img/email.png" /> 发邮件</a></li>
		  <li><a href="#"><img src="img/disk.png" /> 保存</a></li>
		  <li><a href="#"><img src="img/cross.png" /> 删除</a></li>

		</ul>
	  </div>
	</div>
	<pre>HTML:<br />  &lt;a href=&quot;1.html&quot; class=&quot;dropdown1&quot;&gt;菜单示例&lt;/a&gt; <br />  &lt;div id=&quot;data_dropdown1&quot; style=&quot;display:none&quot;&gt;<br />    &lt;div class=&quot;bd&quot;&gt;<br />    &lt;ul&gt;<br />      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;folder.png&quot; /&gt; 打开&lt;/a&gt;&lt;/li&gt;<br />      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;email.png&quot; /&gt; 发邮件&lt;/a&gt;&lt;/li&gt;<br />      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;disk.png&quot; /&gt; 保存&lt;/a&gt;&lt;/li&gt;<br />      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;cross.png&quot; /&gt; 删除&lt;/a&gt;&lt;/li&gt;<br />    &lt;/ul&gt;<br />    &lt;/div&gt;<br />  &lt;/div&gt;

JS:   <br />$(&quot;.dropdown1&quot;).dropdown(&quot;data_dropdown1&quot;);<br />//$(&quot;.dropdown1&quot;).dropdown(&quot;data_dropdown1&quot;, {align:&quot;bottom&quot;}); //除了指定ID外,还可以指定其它参数<br />//$(&quot;.dropdown1&quot;).dropdown({id:&quot;data_dropdown1&quot;, align:&quot;bottom&quot;}); //ID也可以和其它参数一起指定,而不用单独作为一个参数<br />注意: 要显示的内容必须包含在class为bd的div中</pre>

	<br />
<a href="test_load.php" id="dropdown2" title="Load示例" rel="width=450&align=right">示例二</a> (将链接所指向的页面load进来,并dropdown显示,可以通过链接的rel指定一些参数,可以指定显示的方位:top, right, bottom, left, 还可以设定title) 
	<pre>HTML: &lt;a href=&quot;test_load.php&quot; id=&quot;dropdown2&quot; title=&quot;Load示例&quot; rel=&quot;width=450&amp;align=right&quot;&gt;示例二&lt;/a&gt;<br />JS:   $(&quot;#dropdown2&quot;).dropdown();<br />注意: 虽然指定了方位,但如果空间不够显示,会自动显示到相反的方位</pre>

	<script>
	$(document).ready(function() {
		$(".dropdown1").dropdown("data_dropdown1");
		//$(".dropdown1").dropdown("data_dropdown1", {align:"bottom"});
		//$(".dropdown1").dropdown({id:"data_dropdown1", align:"bottom"});	

		$("#dropdown2").dropdown();
	});
	</script>
	</div>
</div>

<div class="block">
	<div class="title">panel使用</div>
	<div class="code">
	1.<a href="test_load.php" class="panel1" title="典型面板" rel="width=400&height=300">示例一</a> (打开一个典型面板,将链接的url页面在面板中显示,将title作为面板标题,并通过rel设置参数)
	<pre>HTML: &lt;a href=&quot;test_load.php&quot; class=&quot;panel1&quot; title=&quot;典型面板&quot; rel=&quot;width=400&amp;height=300&quot;&gt;示例一&lt;/a&gt;<br />JS:   $(&quot;.panel1&quot;).panel();</pre>

	 <br />
	 2.<a href="http://www.baidu.com" class="panel2" title="显示百度网页">示例二</a> (在iframe中显示内容,并在JS中设置参数)
	 <pre>HTML: &lt;a href=&quot;http://www.baidu.com&quot; class=&quot;panel2&quot; title=&quot;显示百度网页&quot;&gt;示例二&lt;/a&gt;<br />JS:   $(&quot;.panel2&quot;).panel({iframe:true, width:650, height:450, left:200, top:400});<br />注意: :rel只能设置字串,数字与布尔值参数,回调函数与复杂的字串参数请在JS中指定</pre>

	<br />
	3.<a href="test_load.php" class="panel3" title="自动刷新" rel="refresh=2&mask=true">示例三</a> (每2秒自动刷新内容,并设置了蒙板)
	<pre>HTML: &lt;a href=&quot;test_load.php&quot; class=&quot;panel3&quot; title=&quot;自动刷新&quot; rel=&quot;refresh=2&amp;mask=true&quot;&gt;示例三&lt;/a&gt;<br />JS:   $(&quot;.panel3&quot;).panel();<br />注意: 通过标题栏上的“刷新”按钮也可以刷新，通过iframe载入的内容也可以自动刷新。当最小化，或关闭时将停止自动刷新</pre>

	<br />
	4.<a href="#" class="panel4" rel="width=350&moveable=false&resizeable=false&minimizable=false">示例四</a> (将网页中的内容显示在面板中,请注意rel的参数设置)
	<div id="panel4_data" style="display:none">
	  <div class="hd">这是示例四</div>
	  <div class="bd">要将网页中的内容显示在面板中，必须指定div的id号，且其内容必须包含在class为bd的div,如果有class为hd的div，则其内容作为面板的标题</div>
	</div>
	<pre>HTML:<br />&lt;a href=&quot;#&quot; class=&quot;panel4&quot; rel=&quot;width=350&amp;moveable=false&amp;resizeable=false&amp;minimizable=false&quot;&gt;示例四&lt;/a&gt;<br />&lt;div id=&quot;panel4_data&quot; style=&quot;display:none&quot;&gt;<br />  &lt;div class=&quot;hd&quot;&gt;这是示例四的标题&lt;/div&gt;<br />  &lt;div class=&quot;bd&quot;&gt;这是示例四的内容&lt;/div&gt;<br />&lt;/div&gt;<br />JS:  $(&quot;.panel4&quot;).panel(&quot;panel4_data&quot;);<br />注意： id可以写到rel中去。比如：<br />HTML: &lt;a href=&quot;#&quot; class=&quot;panel4&quot; rel=&quot;id=panel4_data&amp;width=350&amp;moveable=false&amp;resizeable=false&amp;minimizable=false&quot;&gt;示例四&lt;/a&gt;<br />JS:  $(&quot;.panel4&quot;).panel();<br />同时所有参数也可以写在JS中，比如：<br />HTML： &lt;a href=&quot;#&quot; class=&quot;panel4&quot;&gt;示例四&lt;/a&gt;<br />JS：   $(&quot;.panel4&quot;).panel({id:&quot;panel4_data&quot;, width:350, moveable:false, resizeable:false, minimizable:false});</pre>

	<br />
	5.<a href="#" class="panel5">示例五</a> (显示指定字串)
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;panel5&quot;&gt;示例五&lt;/a&gt;<br />JS:   <br />$(&quot;.panel5&quot;).panel({content:'&lt;div style=&quot;padding:10px; border:1px dotted #ff0000; width:50px; margin:10px;&quot;&gt;&lt;strong&gt;大家好!&lt;/strong&gt;&lt;/div&gt;'});<br />或：<br />$(&quot;.panel5&quot;).click(function(){<br />    $.panel({content:'&lt;div style=&quot;padding:10px; border:1px dotted #ff0000; width:50px; margin:10px;&quot;&gt;&lt;strong&gt;大家好!&lt;/strong&gt;&lt;/div&gt;'});<br />    return false;<br />});</pre>

    <br />
	6.显示在指定位置: 
	<a href="img/plant4.jpg" class="place1">位置一</a> 
	<a href="login_iframe.html" class="place2">位置二</a> 
	<a href="login_inline.html" class="place3">位置三</a> 
	<a href="test_load.php" class="place4">位置四</a>
	<div style="margin-left:400px; background-color:#ff0000;height:30px;width:30px;" id="place_dst"></div>
	<pre>HTML:<br />&lt;a href=&quot;plant4.jpg&quot; class=&quot;place1&quot;&gt;位置一&lt;/a&gt; <br />&lt;a href=&quot;login_iframe.html&quot; class=&quot;place2&quot;&gt;位置二&lt;/a&gt; <br />&lt;a href=&quot;login_inline.html&quot; class=&quot;place3&quot;&gt;位置三&lt;/a&gt; <br />&lt;a href=&quot;test_load.php&quot; class=&quot;place4&quot;&gt;位置四&lt;/a&gt;<br />&lt;div id=&quot;place_dst&quot; style=&quot;margin-left:400px; background-color:#ff0000;height:30px;width:30px;&quot;&gt;&lt;/div&gt;<br />JS:<br />$(&quot;.place1&quot;).panel({context:[&quot;#place_dst&quot;, &quot;bottom&quot;]});<br />$(&quot;.place2&quot;).panel({context:[&quot;#place_dst&quot;, &quot;right&quot;], width:400, iframe:true});<br />$(&quot;.place3&quot;).panel({context:[&quot;#place_dst&quot;, &quot;top&quot;], width:400, type:&quot;dialog&quot;});<br />$(&quot;.place4&quot;).panel({context:[&quot;#place_dst&quot;, &quot;left&quot;], width:400});</pre>

    <br />
	7.关闭指定面板
	 <a href="test_load.php" class="panel_o" rel="id=randString&width=350">打开</a>
	 <a href="#" class="panel_c" rel="id=randString">关闭</a>
	<pre>HTML:<br />&lt;a class=&quot;panel_o&quot; rel=&quot;id=randString&quot; href=&quot;test_load.php&quot;&gt;打开&lt;/a&gt;<br />&lt;a class=&quot;panel_c&quot; rel=&quot;id=randString&quot; href=&quot;#&quot;&gt;关闭&lt;/a&gt;<br />JS:<br />$(&quot;.panel_o&quot;).panel();<br />$(&quot;.panel_c&quot;).closePanel();</pre>

	<br />
	8.<a href="#" class="panel2_close">关闭当前面板</a> (将当前聚焦的面板关闭)
	<pre>HTML: &lt;a href=&quot;#&quot; class=&quot;panel2_close&quot;&gt;关闭当前面板&lt;/a&gt;<br />JS:   $(&quot;.panel2_close&quot;).closePanel();</pre>

	
	<!--7.<a href="plant4.jpg" class="panel6">示例六</a> (显示图片,并自动调整大小)<br />-->
	<script>
	$(document).ready(function() {
		$(".panel1").panel();
		
		$(".panel2").panel({iframe:true, width:650, height:450});
		
		$(".panel3").panel();
		
		$(".panel4").panel("panel4_data");
		
		$(".panel5").click(function(){
			$.panel({content:'<div style="padding:10px; border:1px dotted #ff0000; width:50px; margin:10px;"><strong>大家好!</strong></div>'});
			return false;
		});
		
		$(".place1").panel({context:["#place_dst", "bottom"]});
		$(".place2").panel({context:["#place_dst", "right"], width:400, iframe:true});
		$(".place3").panel({context:["#place_dst", "top"], width:320, type:"dialog"});
		$(".place4").panel({context:["#place_dst", "left"], width:400});
		
		$(".panel_o").panel();
		$(".panel_c").closePanel();
		
		$(".panel2_close").closePanel();				
	});
	</script>
  </div>
</div>

<div class="block">
	<div class="title">dialog使用(主要用作提交表单)</div>
	<div class="code">
	dialog与panel使用方法基本相同,只是多了设置回调函数<br>

	1.<a href="login_inline.html" class="dialog1" title="用户登录">示例一</a>  (将链接的url在面板中显示,将title作为面板标题,ajax提交表单)<br />
	2.<a href="login_inline.html" class="dialog2" title="自定义回调函数">示例二</a> (自定义按钮动作)<br />
	<script>
	$(document).ready(function() {
		var _ajaxOptions = { 
			beforeSubmit:  showRequest,
			success:       showResponse
			//url:       url         // override for form's 'action' attribute 
			//type:      type        // 'get' or 'post', override for form's 'method' attribute 
			//dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
			//clearForm: true        // clear all form fields after successful submit 
			//resetForm: true        // reset the form after successful submit 
		};
	
		$(".dialog1").dialog({ajaxOptions:_ajaxOptions});		
	
		$(".dialog2").dialog({mask:true},function(s,w){
									if (s)alert("用户名是:"+$("input[name='Username']", w.jq_panel).attr("value"));
								}
		);		
		
		function showRequest(formData, jqForm, options) { 
			var queryString = $.param(formData); 
			alert('提交的数据: \n\n' + queryString); 
			return true; 
		} 
		 
		function showResponse(responseText, statusText)  { 
			alert('服务器返回: ' + statusText + '\n\内容: \n' + responseText); 
		} 
	});
	</script>
	</div>

</div>

<div class="block">
	<div class="title">module使用</div>
	<div>
	<div class="code module_area" style="width:875px; margin-bottom:10px;"></div>
	<div class="code module_area" style="width:500px; float:left">
	<a href="login_inline.html" id="module1" title="这是示例一" rel="id=in_data_module1">示例一</a>
	<div id="in_data_module1">

		<div class="bd"><div style="width:200px;">示例一</div></div>
	</div>
	<a href="test_load.php" id="module2" title="这是示例二"></a>
	<a href="login_inline.html" id="module3" title="这是示例三">示例一</a>
	<script>
	$(document).ready(function() {
		var p1 = $("#module1").module();		
		var p2 = $("#module2").module();		
		var p3 = $("#module3").module();		
		var p4 = $("#module4").module();		
	
		//$("#dropdown2").dropdown();
		
		$(".module_area").moduleGroup(p1, p2, p3, p4);
	});
	</script>
	</div>
	<div class="code module_area" style="width:350px; float:left; margin-left:10px;">

	<a href="login_inline.html" id="module4" title="这是示例四">示例一</a>
	</div>
	<div style="clear:both"></div>
	<div class="code module_area" style="width:875px; margin-bottom:10px;"></div>
	</div>
</div>
<br />
<br />
<br />
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="width:1200px;">g</div>

</div>

</body>
</html>
